<!--
 * @Author: C.
 * @Date: 2023-03-08 15:18:06
-->
<script lang="tsx">
  import { defineComponent, ref, toRaw } from 'vue';
  import { Descriptions, DescriptionsItem, TabPane, Tabs, Card, Tag } from 'ant-design-vue';
  import { CopyOutlined } from '@ant-design/icons-vue';

  import Icon from '/@/components/Icon';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
    name: 'MapsView',
    setup() {
      const { createMessage } = useMessage();
      const { clipboardRef } = useCopyToClipboard();
      let EnumMaps = ref({});
      async function getStaticMaps() {
        const modules = await import.meta.globEager('../../../maps/**/*.ts');
        console.log(modules);

        const map = {};
        Object.keys(modules).forEach((key) => {
          const k = key.replace('../../../maps/', '');
          const [mod, fileName = 'index.ts'] = k.split('/');
          const fileField = fileName.split('.')[0];
          console.log(modules[key]);

          if (!map[mod]) {
            map[mod] = {};
            // map[mod][fileField] = modules[key].default.getEnums();
          }
          let module = modules[key];
          for (let _key in module) {
            console.log(module);

            if (!module[_key]?.getEnums) {
              continue;
            }
            if (_key === 'default') {
              map[mod][fileField] = module[_key].getEnums();
            } else {
              map[mod][_key] = module[_key].getEnums();
            }
          }
        });
        console.log(map);

        EnumMaps.value = map;
      }
      getStaticMaps();
      function handleClick(field, title) {
        clipboardRef.value = `"${field}"`;
        createMessage.success(`[${title}]复制成功`);
      }
      function renderDescItem(item) {
        let style = {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        };
        return (
          <DescriptionsItem label={item.value}>
            <div style={style}>
              <Tag color={item.color}>
                {item.icon ? <Icon icon={item.icon}></Icon> : undefined}
                {item.label}
              </Tag>
              <CopyOutlined
                style={{ color: '#0960bd', fontSize: '20px' }}
                onClick={() => handleClick(item.value, item.label)}
              />
            </div>
          </DescriptionsItem>
        );
      }
      function renderDesc(modObj) {
        return Object.keys(modObj).map((fileName) => {
          return (
            <Card title={fileName}>
              <Descriptions bordered size="small">
                {modObj[fileName].map((item) => {
                  return renderDescItem(item);
                })}
              </Descriptions>
            </Card>
          );
        });
      }
      return () => (
        <PageWrapper title="枚举表">
          <div class="field-view">
            <Tabs>
              {Object.keys(toRaw(EnumMaps.value)).map((modName) => {
                return (
                  <TabPane tab={modName} key={modName}>
                    {renderDesc(toRaw(EnumMaps.value)[modName])}
                  </TabPane>
                );
              })}
            </Tabs>
          </div>
        </PageWrapper>
      );
    },
  });
</script>
<style lang="less" scoped>
  .field-view {
    background-color: @component-background;
    padding: 10px 20px 100px 20px;
  }
</style>
